<template>
  <view class="templateCard">
    <view class="cardContent">
      <view class="cardHeader">
        <view class="titleRow">
          <view class="title">{{ item.title }}</view>
          <view class="tag">模板</view>
        </view>
        <view class="metaInfo">
          <view class="description">{{ item.description || "暂无描述" }}</view>
          <view class="bottomRow">
            <view class="createTime">{{ formatDate(item.created_at) }}</view>
            <view class="questionCount">问题数: {{ item.question_count }} 个</view>
          </view>
        </view>
      </view>
      <view class="cardFooter">
        <view class="actionGroup">
          <view class="textBtn previewBtn" @click="$emit('preview', item)">
            预览模板
          </view>
          <view class="textBtn createBtn" @click="$emit('use', item)">
            使用模板
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return "";
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
    }
  }
};
</script>

<style scoped>
.templateCard {
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  background: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.cardContent .cardHeader {
  padding: 24rpx;
}

.titleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.tag {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 20rpx;
  background-color: #e8f4ff;
  color: #409eff;
}

.metaInfo {
  display: flex;
  flex-direction: column;
}

.description {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.bottomRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.createTime, .questionCount {
  font-size: 26rpx;
  color: #999;
}

.cardFooter {
  border-top: 1rpx solid #eee;
}

.actionGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.textBtn {
  font-size: 28rpx;
  border-radius: 6rpx;
  height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  border-right: #eee 1px solid;
}

.createBtn {
  color: var(--v-theme);
}

.previewBtn {
  color: #47c5c4;
}
</style>